<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js 日历</title>
 <style type="text/css">
  *{
  border: 1;
  padding: 0;
  margin: 0;
  font-family: "微软雅黑";
  }
 </style>
</head>
<body>
 <div class="calendar_wrap">
 <div class="control_bar">
  <span class="left-bt"><input type="button" id="reduce_bt" value="<"></span>
  <b id="current_date">2017-02</b>
  <span class="right-bt"><input type="button" id="add_bt" value=">"></span>
 </div>
 <table class="calendar_list" cellspacing="4">
  <thead>
   <tr>
   <td>日</td>
   <td>一</td>
   <td>二</td>
   <td>三</td>
   <td>四</td>
   <td>五</td>
   <td>六</td>
   </tr> 
  </thead>
  <tbody id="date_list"></tbody> 
 </table>
 </div>
 <button id="resetBt">回到现在日期</button>
 <script type="text/javascript">
	var dateScreen = document.getElementById('current_date');
	var reduceBt = document.getElementById('reduce_bt');
	var addBt = document.getElementById('add_bt');
	var dateList = document.getElementById('date_list');
	var resetBt = document.getElementById('resetBt');
	var overall_date = [31,28,31,30,31,30,31,31,30,31,30,31];
	var add_date = 1;
	var now_date = new Date();
	var nowFullYear = now_date.getFullYear();
	var nowMonth = now_date.getMonth();

	printCalendar();
  
	reduceBt.onclick = function(){
		nowMonth = nowMonth - 1;
			if (nowMonth == -1) {
				nowFullYear = nowFullYear - 1;
				nowMonth = 11;
			}
		clearRows();
		printCalendar();
	}

	addBt.onclick = function(){
		nowMonth+= 1;
		if (nowMonth == 12) {
			nowFullYear+= 1;
			nowMonth = 0;
		} 
		clearRows();
		printCalendar();
	}
	
	resetBt.onclick = function(){
		var resetDate = new Date();
		nowFullYear = resetDate.getFullYear();
		nowMonth = resetDate.getMonth();
		clearRows();
		printCalendar();
	}
	
	function printCalendar(){
		var printDate = new cur_date(nowFullYear,nowMonth);
		var printFirstDay = printDate.firstDay;
		var printTotalDate = printDate.totalDate;
		var printMonth = printDate.cur_month;
		
		(printMonth >= 9)?(printMonth = (printMonth + 1)):(printMonth = ("0" + (printMonth + 1)));
	
		var printYear = printDate.cur_year;
		var totalRows = Math.ceil((printTotalDate + (printFirstDay - 1)) / 7) + 1;

		dateScreen.innerText = printYear + "-" + printMonth;
		
		for (var i = 0; i < totalRows; i++) {
			dateList.insertRow(i);
			for (var j = 0; j < 7; j++) {
				if (add_date > printTotalDate) {
					break;
				}
				dateList.rows[i].insertCell(j);
				if (i == 0 && j >= printFirstDay) {
					dateList.rows[i].cells[j].innerText = add_date;
					add_date++;
				}else if(i > 0){
					dateList.rows[i].cells[j].innerText = add_date;
					add_date++;
				}
			}
		}
		add_date = 1;
	}
	
	function cur_date(curYear,curMonth){
		this.cur_firstDate = new Date(curYear,curMonth,1);
		this.cur_year = curYear;
		this.cur_month = curMonth;
		this.totalDate = is_leapYear(curYear,curMonth);
		this.firstDay = this.cur_firstDate.getDay();
	}
	
	function is_leapYear(target_year,target_month){
		if ((target_month == 1) && (target_year % 4 == 0) && ((target_year % 100 != 0) || (target_year % 400 != 0))) {
			return 29;
		}else{
			return overall_date[target_month];
		}
	}
	
	function clearRows(){
		var rowsNum = dateList.rows.length;
		while(rowsNum > 0){
			dateList.deleteRow(rowsNum - 1);
			rowsNum--;
		}
	}
 </script>
</body>
</html>